<template>
    <div>
        <!--  面包屑  -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!--  卡片  -->
        <el-card>
            <el-row :gutter="20">
                <!--    添加分类区域    -->
                <el-col :span="4">
                    <el-button @click="setAddCategories" type="primary">添加分类</el-button>
                </el-col>
            </el-row>
            <!--   分类列表区域   -->
            <tree-table :data="cateList"
                        :selection-type="false"
                        :expand-type="false"
                        show-index
                        index-text="#"
                        border
                        :show-row-hover="false"
                        :columns="columns">
                <!--         自定义模版渲染-->
                <template
                        slot="isok"
                        slot-scope="scope">
                    <i v-if="scope.row.cat_deleted === false"
                       class="el-icon-success"
                       style="color: #55a532"></i>
                    <i v-else
                       class="el-icon-error"
                       style="color: #bd2c00"></i>
                </template>
                <!--    排序    -->
                <template
                        slot="order"
                        slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
                    <el-tag v-else-if="scope.row.cat_level === 1" size="mini" type="success">二级
                    </el-tag>
                    <el-tag v-else size="mini" type="warning">三级</el-tag>
                </template>
                <!--    操作    -->
                <template
                        slot="opt"
                        slot-scope="scope">
                    <span style="display: none">{{scope.row}}</span>
                    <el-button type="primary"
                               size="mini"
                               icon="el-icon-edit"></el-button>
                    <el-button type="danger"
                               size="mini"
                               icon="el-icon-delete"></el-button>
                </template>
            </tree-table>
            <!--   分页区域   -->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="querInfo.pagenum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="querInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--  添加分类对话框  -->
        <el-dialog
                @close="addCatedDialogClose"
                title="添加分类"
                :visible.sync="SetAddCategoriesVisible"
                width="50%">
            <!--   主体区域   -->
            <el-form :model="addFromCategoriesRoles"
                     :rules="addCategoriesRoles"
                     ref="addFromUserRef"
                     label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addFromCategoriesRoles.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader
                            expand-trigger="hover"
                            v-model="setectedOptions"
                            :props="cascaderProps"
                            change-on-select
                            @change="btnChangeParent"
                            clearable
                            :options="parentCateList">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <!--   按钮区域   -->
            <span slot="footer" class="dialog-footer">
        <el-button @click="SetAddCategoriesVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="AddCategor">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>export default {
  name: 'Cate',
  data() {
    return {
      // 分类列表
      cateList: [],
      // 分页条件
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      // 总数据条数
      total: 0,
      // 表格列数据
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          align: 'left'
        },
        {
          label: '是否有效',
          // 自定义模版
          type: 'template',
          template: 'isok',
          align: 'center',
          headerAlign: 'center'
        },
        {
          label: '排序',
          // 自定义模版
          type: 'template',
          template: 'order',
          align: 'center',
          headerAlign: 'center'
        },
        {
          label: '操作',
          // 自定义模版
          type: 'template',
          template: 'opt',
          align: 'center',
          headerAlign: 'center'
        }
      ],
      // 添加分类对话框
      SetAddCategoriesVisible: false,
      // 添加分类表单
      addFromCategoriesRoles: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      // 校验
      addCategoriesRoles: {
        cat_name: [
          {
            required: true, message: '请输入分类名称', trigger: 'blur'
          },
          {
            min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'
          }
        ]
      },
      // 父级分类数据
      parentCateList: [],
      // 级联选择数据
      setectedOptions: [],
      // 级联配置
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  mounted() {
    this.getCategories()
  },
  methods: {
    // 分类请求
    getCategories() {
      this.$http.get('categories', {params: this.querInfo}).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error(res.data.meta.msg)
        }
        this.cateList = res.data.data.result
        this.total = res.data.data.total
      })
    },
    // 最新页码数
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize
      this.getCategories()
    },
    // 监听页码
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.querInfo.pagenum = newPage
      this.getCategories()
    },
    // 添加分类对话框
    setAddCategories() {
      this.getParentCateList()
      this.SetAddCategoriesVisible = true
    },
    // 添加分类请求
    AddCategor() {
      this.$refs.addFromUserRef.validate(valid => {
        if (!valid) return
        this.$http.post('categories', this.addFromCategoriesRoles).then(res => {
          if (res.data.meta.status !== 201) {
            return this.$message.error(res.data.meta.msg)
          }
          this.$message.success(res.data.meta.msg)
          this.SetAddCategoriesVisible = false
          // 刷新
          this.getCategories()
        })
      })
    },
    // 重置表单数据
    addCatedDialogClose() {
      this.$refs.addFromUserRef.resetFields()
      this.addFromCategoriesRoles.cat_pid = 0
      this.addFromCategoriesRoles.cat_level = 0
      this.setectedOptions = []
    },
    // 点击父级分类获取数据
    getParentCateList() {
      this.$http.get('categories', {
        params: {
          type: 2
        }
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error(res.data.meta.msg)
        }
        this.parentCateList = res.data.data
      })
    },
    // 监听级联选择
    btnChangeParent() {
      console.log(this.setectedOptions)
      // 如果setectedOptions 的length > 0 选中父级分类
      // < 0 没有选中
      if (this.setectedOptions.length > 0) {
        // 父级分类ID
        this.addFromCategoriesRoles.cat_pid = this.setectedOptions[this.setectedOptions.length - 1]
        // 为当前分类等级赋值
        this.addFromCategoriesRoles.cat_level = this.setectedOptions.length
        return
      } else {
        this.addFromCategoriesRoles.cat_pid = 0
        this.addFromCategoriesRoles.cat_level = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .zk-table {
        margin-top: 10px;
    }
</style>
